<template>
	<view>
		<view class="card">
			<view class="item d-flex a-center">
				<view class="label">任务对象：</view>
				<view class="flex-1 d-flex a-center" @click="showPicker = true">
					<input class="value" v-model="userName" placeholder="请选择发布任务对象" disabled />
					<text class="iconfont icon-a-zujian32 size24 color-999 m-left20"></text>
				</view>
			</view>
			<view class="item d-flex a-center">
				<view class="label">开始时间：</view>
				<view class="flex-1 d-flex a-center" @click="openDatetimePicker('1')">
					<input class="value" v-model="start_time" placeholder="请选择" disabled />
					<text class="iconfont icon-a-zujian32 size24 color-999 m-left20"></text>
				</view>
			</view> 
			<view class="item d-flex a-center">
				<view class="label">结束时间：</view>
				<view class="flex-1 d-flex a-center" @click="openDatetimePicker('2')">
					<input class="value" v-model="end_time" placeholder="请选择" disabled />
					<text class="iconfont icon-a-zujian32 size24 color-999 m-left20"></text>
				</view>
			</view> 
			<view class="item d-flex a-center">
				<view class="label">任务名称：</view>
				<input class="value" v-model="task_name" placeholder="请输入任务名称" />
			</view>
			<view class="item">
				<view class="label">任务详情：</view>
				<up-textarea v-model="task_desc" placeholder="请输入任务详情" count maxlength="150" border="none"></up-textarea>
			</view>
		</view>
		
		<view class="btn flexac size28 white" @click="handlePublish">立即发布</view>
		
		<up-picker :show="showPicker" :columns="staffList" keyName="name" @cancel="showPicker = false" @confirm="confirmPicker"></up-picker>
		<up-datetime-picker :show="showDatetimePicker" v-model="datetime" mode="datetime" @cancel="showDatetimePicker = false" @confirm="confirmDatetime"></up-datetime-picker>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { Toast, Back } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import { useMainStore } from '@/stores/index'
	const mainStore = useMainStore()

	const props = defineProps({
		defaultValue: { // 用来回显的json对象
			type: String,
			default: ''
		}
	})
	
	onMounted(() => {
		if(props.defaultValue) {
			let e = JSON.parse(props.defaultValue)
			if(e.start_time) start_time.value = e.start_time
			if(e.end_time) end_time.value = e.end_time
			if(e.task_name) task_name.value = e.task_name
			if(e.task_desc) task_desc.value = e.task_desc
		}
		getStaff()
	})
	
	const staffList = ref([[]])
	const getStaff = () => {
		Http.post({
			url: '/hr/Employee/list',
			data: {
				pageSize: 999
			},
			Typejson: false
		}).then(res => {
			if(res.code == 0) staffList.value[0] = res.rows || []
		})
	}
	
	const userName = ref('')
	const user_id = ref('')
	const showPicker = ref(false)
	const confirmPicker = (e) => {
		let item = e.value[0]
		userName.value = item.name
		user_id.value = item.userId
		showPicker.value = false
	}
	
	const start_time = ref('')
	const end_time = ref('')
	const showDatetimePicker = ref(false)
	const datetime = ref(Date.now())
	const timeType = ref('1') // 1开始、2结束
	const openDatetimePicker = (type) => {
		timeType.value = type
		showDatetimePicker.value = true
	}
	const confirmDatetime = (e) => {
		let time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
		if(timeType.value == 1) start_time.value = time
		if(timeType.value == 2) end_time.value = time
		showDatetimePicker.value = false
	}
	
	const task_name = ref('')
	const task_desc = ref('')
	
	const handlePublish = () => {
		Http.post({
			url: '/hr/task/createWorkTask',
			data: {
				taskName: task_name.value,
				taskDesc: task_desc.value,
				startTime: start_time.value,
				endTime: end_time.value,
				userId: user_id.value
			}
		}).then(res => {
			Toast(res.msg)
			if(res.code != 0) return
			setTimeout(() => {
				Back()
			}, 1500)
		})
	}
</script>

<style lang="scss" scoped>
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 20rpx;
		.item {
			padding: 30rpx 0;
			&:not(:last-child) {
				border-bottom: 1rpx solid #F2F2F2;
			}
			.label {
				font-size: 28rpx;
				color: #222;
			}
			.value {
				flex: 1;
				text-align: right;
				font-size: 28rpx;
			}
		}
	}    
	.btn {
		width: 690rpx;
		height: 82rpx;
		background: v-bind('mainStore.color');
		border-radius: 20rpx;
		margin: 80rpx auto 0;
	}
</style>
